<script setup>
import {ref} from "vue";
// 子组件
import {defineProps} from "vue"


const props=defineProps(['practice','radioOptions','checkboxOptions','judgeOptions'])
// 单选选项被点击
const handleRadioChange = (options, index) => {
  for (const option of options) {
    option.checked = 0;
  }
  options[index].checked = 1;
}


</script>

<template>
  <!--子组件-->
  <!--  填空题和简答题答案存放处-->
  <el-form-item label="填写答案" v-if="practice.type == 3||practice.type == 4">
    <el-input
        v-model="practice.answer"
        style="width: 800px"
        :rows="8"
        type="textarea"
        placeholder="请填写你的答案"
    />
  </el-form-item>
  <!--单选-->
  <el-form-item label="题目选项" v-if="practice.type == 0">
    <el-radio-group
        v-model="practice.answer"
        size="large"
    >
      <el-row :gutter="20">
        <el-col :span="24" v-for="(option, index) in radioOptions" :key="index">
          <el-radio :value="option.value" @change="handleRadioChange(radioOptions,index)">
            {{ option.value }}
            <div
                style="width: 670px;height: 40px; margin-left: 20px;margin-right: 10px;">{{ radioOptions[index].content }}</div>
          </el-radio>
        </el-col>
      </el-row>
    </el-radio-group>
  </el-form-item>
  <!--    多选题-->
  <el-form-item label="题目选项" v-if="practice.type == 1">
    <el-checkbox-group v-model="practice.answer" size="large">
      <el-row :gutter="20">
        <el-col :span="24" v-for="(option, index) in checkboxOptions" :key="index" style="margin: 10px 0">
          <el-checkbox :label="option.value" :value="option.value">
            {{ option.value }}
            <div style="width: 670px;height: 40px; margin-left: 20px;margin-right: 10px;">{{ checkboxOptions[index].content }}</div>
          </el-checkbox>
        </el-col>
      </el-row>
    </el-checkbox-group>
  </el-form-item>
  <!--判断-->
  <el-form-item label="题目选项" v-if="practice.type == 2">
    <el-radio-group
        v-model="practice.answer"
        size="large"
    >
      <el-row :gutter="20">
        <el-col :span="24" v-for="(option, index) in judgeOptions" :key="index">
          <el-radio :value="option.value" @change="handleRadioChange(judgeOptions,index)">
            {{ option.value }}
            <div style="width: 670px;height: 40px; margin-left: 20px;margin-right: 10px;">
              {{ judgeOptions[index].content }}
            </div>
          </el-radio>
        </el-col>
      </el-row>
    </el-radio-group>
  </el-form-item>
</template>

<style scoped lang="less">
.el-radio {
  display: block;
  margin: 10px 0;
}
</style>